<template>
  <Input
    ref="inputRef"
    v-bind="$attrs"
    v-on="listeners"
    @on-enter="enter"
    :size="sizeAdapter"
    :clearable="clearable"
    :disabled="disabled"
    :class="classes">
    <template v-slot:append v-if="!isEnter ">
      <Button
        class="suffix-btn"
        type="secondary"
        icon="search"
        @click="submit">
      </Button>
    </template>
    <template v-slot:prefix v-else>
      <Button
        class="suffix-btn"
        type="secondary"
        icon="search"
        @click="submit">
      </Button>
    </template>
  </Input>
</template>
<script>
import { oneOf } from '../../utils/assist'
import Input from '../input/input.vue'
import Button from '../button/button.vue'
const prefixCls = 'haloe-search'

export default {
  inheritAttrs: false,
  props: {
    isEnter: {
      type: Boolean,
      default: false
    },
    filterValue: {
      type: [Object, Number, String],
      default: () => null
    },
    filterItems: {
      type: Array,
      default: () => null
    },
    filterWidth: {
      type: [Number, String],
      default: 90
    },
    clearable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      validator (value) {
        return oneOf(value, ['small', 'large', 'middle'])
      },
      default () {
        return 'middle'
      }
    }
  },
  components: { Input, Button },
  computed: {
    sizeAdapter () {
      if (this.size === 'middle') {
        return 'default'
      }
      return this.size
    },
    classes () {
      return [
        prefixCls,
        {
          [`${prefixCls}-disabled`]: this.disabled,
          [`${prefixCls}-suffix`]: !this.isEnter,
          [`${prefixCls}-filter`]: this.isFilter
        }
      ]
    },
    isFilter () {
      return !this.isEnter && this.filterItems
    },
    inputStyle () {
      if (this.isFilter) {
        return {
          'padding-left': `${Number(this.filterWidth) + 10}px`
        }
      }
      return {}
    },
    selectStyle () {
      if (this.isFilter) {
        return {
          'width': `${this.filterWidth}px`
        }
      }
      return {}
    }
  },
  watch: {
    inputStyle () {
      this.updateInputStyle()
    },
    filterValue () {
      this.currentFiltervalue = this.filterValue
    }
  },
  data () {
    return {
      currentFiltervalue: this.filterValue,
      listeners: { ...this.$attrs, 'on-enter': () => {} }
    }
  },
  methods: {
    enter (event) {
      if (this.isEnter) {
        this.submit()
      } else {
        if (this.$attrs['on-enter']) {
          this.$emit('on-enter', this.$refs['inputRef'].currentValue, this.isFilter && this.currentFiltervalue)
        }
      }
    },
    submit () {
      if (!this.disabled && this.$attrs['on-submit']) {
        this.$emit('on-submit', this.$refs['inputRef'].currentValue, this.isFilter && this.currentFiltervalue)
      }
    },
    updateInputStyle () {
      if (this.$refs['inputRef'] && this.$refs['inputRef'].$refs['input']) {
        this.$refs['inputRef'].$refs['input'].style.paddingLeft = this.inputStyle['padding-left']
      }
    },
    changeValue (value) {
      this.currentFiltervalue = value
      this.$emit('on-select', value)
    }
  },
  mounted () {
    this.updateInputStyle()
  }
}
</script>
